<template>
  <div class="app-container">
    <el-row>
      <el-col :span="24" class="card-box" v-if="data">
        <el-card>
		    <div slot="header"><span><i class="el-icon-monitor"></i> 基本信息</span></div>
			<div class="el-table el-table--enable-row-hover el-table--medium">
				<div style="text-align: center;font-size: 30px;margin: 20px;">{{data.reportName}}</div>
				<el-row style="margin-bottom: 20px;">
				  <el-col :span="8"><div class="cell">报表编号：<strong>{{data.reportNo}}</strong></div></el-col>
				  <el-col :span="8"><div class="cell" >制作人：{{data.createFullname}}</div></el-col>
				  <el-col :span="8"><div class="cell" >制作时间：{{data.createTime}}</div></el-col>
				</el-row>	
			  <table cellspacing="0" style="width: 100%">
			    <tbody>
			      <tr>
			        <td class="el-table__cell is-leaf"><div class="cell bold">接访次数</div></td>
			        <td class="el-table__cell is-leaf" colspan="2"><div class="cell" >{{data.number}}</div></td>
			      </tr>
				  <tr>
				    <td class="el-table__cell is-leaf"><div class="cell bold">团体主题</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell bold" >问题类型</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell bold">咨询师</div></td>
				  </tr>
				  <tr v-for="(item,index) in data2">
				    <td class="el-table__cell is-leaf"><div class="cell">{{item.subjectName}}</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell" >{{item.qaTypeName}}</div></td>
				    <td class="el-table__cell is-leaf"><div class="cell">{{item.userName}}</div></td>
				  </tr>
				 </tbody>
				</table> 
				</div>
		</el-card>
	  </el-col>
	  <el-col :span="24" class="card-box" >
		<el-card>
			<div slot="header"><span><i class="el-icon-picture-outline-round"></i> 结果统计图</span></div>
			<el-row>
				<el-col :span="6">
					<div style="height: 24px;"></div>
				</el-col>
				<el-col :span="6">
					<div ref="group5" style="height: 420px" />
				</el-col>
				<el-col :span="6">
					<div ref="group6" style="height: 420px" />
				</el-col>
				<el-col :span="6">
					<div style="height: 24px;"></div>
				</el-col>
			</el-row>
		</el-card>
	  </el-col>
	</el-row>

	<el-form label-width="100px">
	  <el-form-item style="text-align: center;margin-left:-120px;margin-top:30px;">
	    <el-button @click="close()">返回</el-button>
	  </el-form-item>
	</el-form>
  </div>
</template>

<script>
import { getReport,listTeamReport,listGroupReport } from "@/api/consult/report";
import * as echarts from "echarts";

export default {
  name: "viewConsultReport1",
  data() {
    return {
		data: null,
		data2: null,
		data3: null,
		group5: null,
		group6: null,
    };
  },
  created() {
    const reportId = this.$route.params && this.$route.params.reportId;
	console.log(reportId)
	if(reportId) {
		getReport(reportId).then(response => {
		    this.data = response.data;
			listTeamReport({reportId : reportId}).then(response => {
					  if(response.rows) {
						  this.data2 = response.rows;
						  let number = 0;
						  this.data2.forEach(item=> {
						  	number += item.number;
						  })
						  this.data.number = number;
					  }
						
			});
			
			listGroupReport({reportId : reportId}).then(response => {
					  if(response.rows) {
						  this.data3 = response.rows;
						  this.initChart(this.$refs.group5, '01', '问题类型');
						  this.initChart(this.$refs.group6, '03', '咨询方式')
					  }
						
			}); 
				
		});
	}
  },
  methods: {
	  initChart(group, type, name) {
		this.group1 = echarts.init(group, "macarons");
		let gdata1 = [];
		this.data3.forEach(item=> {
			  if(item.groupType==type) {
				  gdata1.push({value:item.groupVal,name:item.typeName + (type=='04'?'级':'')})
			  }
		})
		this.group1.setOption({
		title: {
									  text: name,
									  left: 'center'
									},
									tooltip: {
									    trigger: 'item'
									  },
									legend: {
									    bottom: 'left'
									  },
			series: [{
				type: 'pie',
										radius: '50%',
				avoidLabelOverlap: false,
				emphasis: {
				        itemStyle: {
				          shadowBlur: 10,
				          shadowOffsetX: 0,
				          shadowColor: 'rgba(0, 0, 0, 0.5)'
				        }
				      },
				data: gdata1
			}]
		});
	  },
    /** 关闭按钮 */
    close() {
      const obj = { path: "/consult/report" };
      this.$tab.closeOpenPage(obj);
    }
  },
  mounted() {
	
  }
};
</script>

<style>
	.tdbg {
		background: rgb(64, 158, 255);
		color:#ffffff;
	}
	.bold {
		font-weight: bold;
	}
	.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell {
		border-left:1px solid #dfe6ec;
	}
	.el-table th.el-table__cell.is-leaf, .el-table td.el-table__cell:last-child {
		border-right:1px solid #dfe6ec;
	}
	table tr:first-child td {
		border-top:1px solid #dfe6ec;
	}
</style>
